<template>
  <div class="home">
    <div id='topbg'>
    </div>
    <div id="navs" >
    <div id="navss">
      <div ref="my" class="navlog"><img :src='logoimg' alt=""></div>
        <div class="navbox">
          <router-link to="/Home" tag="li" class="li"><span>首页</span></router-link>
          <router-link to="/Blogs" tag="li"  class="li"><span>专栏</span></router-link>
          <router-link to="/index/content" tag="li"  class="li"><span>社区</span></router-link>
          <router-link to="/mainshow/bookshop" tag="li"  class="li"><span>书店</span></router-link>
          <router-link to="/Talk" tag="li"  class="li"><span>闲嗑</span></router-link>
        </div>
    </div>
  </div>
    <HomeTitle />
    <HomeArtice/>
    <HomeMiddle />
    <HomeTopic />
    <HomeButton />
  </div>
</template>

<script>
import HomeTitle from '@/components/HomeTitle.vue'
import HomeArtice from '@/components/HomeArtice.vue'
import HomeMiddle from '@/components/HomeMiddle.vue'
import HomeTopic from '@/components/HomeTopic.vue'
import HomeButton from '@/components/HomeButton.vue'
import $ from 'jquery'

export default {
  
  name: 'Home',
  data(){
    return{
        logoimg:require('../assets/images/知遇1.png')
    }
  },
  components: {
    HomeTitle,
    HomeArtice,
    HomeMiddle,
    HomeTopic,
    HomeButton
  },
  methods: {
    Scroll() {
      var scrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop;
      let distance = document.documentElement.clientHeight-80;
      // console.log(distance)
        if(scrollTop>distance){
            $('#navs').css('backgroundColor','#fff')
                $('#navs').css('height','85px')
                $('#navs').css('position','fixed')
                $('#navs ').css('box-shadow','rgba(0, 0, 0, 0.1) 0px 5px 20px')
                $('#navs li').css('color','#333')
                this.logoimg = require('@/assets/images/知遇2.png')
                // $('.navlog').html(`<img src='require('../assets/images/知遇2.png')' alt="">`)
        }else{
             $('#navs').css('box-shadow','none')
                $('#navs').css('height','100px')
                $('#navs').css('backgroundColor','transparent')
                $('#navs').css('position','absolute')
                $('#navs li').css('color','#fff')
                this.logoimg = require('@/assets/images/知遇1.png')
                // $('.navlog').html(`<img src='../assets/images/知遇1.png' alt="">`)
        }
    },
  },
  mounted() {
    window.addEventListener("scroll", this.Scroll);
    var middleflag=1
    var middlelfet=0
    setInterval(function(){
                // console.log('up')
                if(middleflag==1){
                    middlelfet+=5
                    // console.log(middlelfet)
                }
                else{
                    middlelfet-=5
                    // console.log(middlelfet)
                }
                $('.middle-bg').eq(0).css('marginLeft',middlelfet+'px')
                if(middlelfet>=20 || middlelfet<=-20){
                    middleflag=-middleflag
                }
            },300)
    $('#scrollDown').click(function(){
                // console.log(window.innerHeight) 
                s=window.innerHeight-40
                $('html,body').animate({scrollTop:s+'px'});
            })
            $('.oplefticon').eq(0).click(function(){
                let l=(parseInt($('.opIconss').eq(0).css("marginLeft"))+170)
                // console.log(l)
                if(l>=0){
                    $('.opIconss').eq(0).css("marginLeft",'-1020px')
                }
                else{
                    $('.opIconss').eq(0).css("marginLeft",l+'px')
                }
            })
            $('.oplefticon').eq(1).click(function(){
                let l=(parseInt($('.opIconss').eq(0).css("marginLeft"))-170)
                // console.log(l)
                if(l<=-2040){
                    $('.opIconss').eq(0).css("marginLeft",'-1020px')
                }
                else{
                    $('.opIconss').eq(0).css("marginLeft",l+'px')
                }
            })
  }
}
</script>
<style>
  *{
    margin: 0;
    padding: 0;
  }
  @keyframes bgbody {
            0%{
                opacity: 0;
                background-color: #333;
            }
            100%{
                opacity: 1;
            }
        }
  body,html,.home{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            /* cursor: default; */
            /* display: block; */
            /* overflow: hidden; */
            animation: bgbody 1.5s ease;
        }
  #topbg{
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: -1;
            color: transparent;
            background-image: url(../assets/images/主页bg.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            transition: opacity 1s;
        }
</style>
